<template>
	<view class="content">
		<view class="network_error">
			<image src="../../static/icon_r/network_01.png"></image>
			<view class="error_title">网络无法连接</view>
			<view class="error_content">世界上最遥远的距离真过于此</view>
			<view class="btn"><button @click="retryConnect">刷新</button></view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			retryConnect() {
				// 尝试重新获取网络连接
				uni.getNetworkType({
					success: function(res) {
						console.log(res)
						if (res.networkType !== 'none') {
							// 网络恢复，返回上一页或首页
							uni.navigateBack();
						} else {
							// 网络仍然没有恢复，可以给出提示或进一步处理
							uni.showToast({
								title: '网络连接仍失败',
								icon: 'none'
							});
						}
					}
				});
				}
			}
		}
</script>

<style scoped lang="less">
	page {
		background-color: white;
	}

	.content {
		background-color: white;
		width: 100%;
		height: 100vh;
		display: flex;
		.network_error {
			width: 100%;
			line-height: 50%;
			margin: auto;
			text-align: center;
			margin-top: 30%;

			.error_title {
				margin-top: 30upx;
				width: 100%;
				height: 40upx;
				line-height: 40upx;
				font-size: 30upx;
				// margin: auto;
				font-weight: bold;
				// background-color: red;
			}

			.error_content {
				width: 100%;
				height: 30upx;
				line-height: 25upx;
				// padding-left: 80upx;
				margin-top: 20upx;
				color: #818181;
				// margin: auto;
				font-weight: bold;
			}

			.btn {
				width: 100%;
				height: 100%;
				margin-top: 10upx;

				button {
					width: 160upx;
					height: 60upx;
					font-size: 30upx;
					line-height: 60upx;
					background-color: white;
					border: 1px solid #b0b0b0;
					border-radius: 30upx;
				}
			}

			image {
				width: 300upx;
				height: 300upx;
			}
		}

	}
</style>